<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 物资详情</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
    
    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="inventory.html">
          <i class="fas fa-chevron-left"></i>
        </a>
      </div>
      <div class="nav-title">物资详情</div>
      <div class="nav-right">
        <i class="fas fa-qrcode"></i>
      </div>
    </div>
    
    <!-- 内容区域 -->
    <div class="app-content">
      <!-- 物资头部 -->
      <div class="bg-white p-4">
        <div class="flex items-center">
          <div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
            <i class="fas fa-box text-blue-500 text-2xl"></i>
          </div>
          <div>
            <div class="text-lg font-bold" id="material-name">加载中...</div>
            <div class="text-sm text-gray-500 mt-1" id="material-code">编号：加载中...</div>
            <div class="mt-2">
              <span class="tag tag-green" id="material-status">加载中...</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 快捷操作 -->
      <div class="bg-white mt-2 flex border-t border-b border-gray-100">
        <a href="material_apply.html" class="flex-1 py-3 text-center">
          <i class="fas fa-file-alt text-blue-500 block mx-auto mb-1"></i>
          <span class="text-xs">申领</span>
        </a>
        <a href="#" class="flex-1 py-3 text-center">
          <i class="fas fa-exchange-alt text-green-500 block mx-auto mb-1"></i>
          <span class="text-xs">调拨</span>
        </a>
        <a href="#" class="flex-1 py-3 text-center">
          <i class="fas fa-clipboard-check text-purple-500 block mx-auto mb-1"></i>
          <span class="text-xs">盘点</span>
        </a>
        <a href="#" class="flex-1 py-3 text-center">
          <i class="fas fa-history text-orange-500 block mx-auto mb-1"></i>
          <span class="text-xs">历史</span>
        </a>
      </div>
      
      <!-- 基本信息 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>基本信息</span>
        </div>
        <div class="card-body">
          <div class="grid grid-cols-1 gap-4">
            <div class="flex justify-between items-center">
              <span class="text-gray-500">物资名称</span>
              <span id="info-name">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">物资编号</span>
              <span id="info-code">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">规格型号</span>
              <span id="info-spec">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">物资类别</span>
              <span id="info-category">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">计量单位</span>
              <span id="info-unit">加载中...</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 库存信息 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>库存信息</span>
        </div>
        <div class="card-body">
          <div class="grid grid-cols-1 gap-4">
            <div class="flex justify-between items-center">
              <span class="text-gray-500">当前库存</span>
              <span id="stock-current">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">安全库存</span>
              <span id="stock-safe">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">库存状态</span>
              <span id="stock-status">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">最近入库</span>
              <span id="stock-last-in">加载中...</span>
            </div>
            <div class="divider"></div>
            <div class="flex justify-between items-center">
              <span class="text-gray-500">最近出库</span>
              <span id="stock-last-out">加载中...</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 库存趋势 -->
      <div class="card mx-4 mt-4">
        <div class="card-header">
          <span>库存趋势</span>
        </div>
        <div class="card-body p-0">
          <div class="p-4">
            <div class="h-40 bg-gray-100 rounded-lg flex items-center justify-center">
              <div class="text-center">
                <i class="fas fa-chart-line text-gray-400 text-2xl mb-2"></i>
                <div class="text-gray-500 text-sm">近30天库存变化趋势</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 库存分布 -->
      <div class="card mx-4 mt-4 mb-4">
        <div class="card-header">
          <span>库存分布</span>
        </div>
        <div class="card-body p-0">
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-hospital text-blue-500"></i>
              </div>
              <div>
                <div class="font-medium">总库</div>
                <div class="text-xs text-gray-500">主要仓库</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium" id="location-main">加载中...</div>
              <div class="text-xs text-gray-500">占比: <span id="location-main-percent">加载中...</span></div>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-clinic-medical text-green-500"></i>
              </div>
              <div>
                <div class="font-medium">门诊库</div>
                <div class="text-xs text-gray-500">门诊区域</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium" id="location-clinic">加载中...</div>
              <div class="text-xs text-gray-500">占比: <span id="location-clinic-percent">加载中...</span></div>
            </div>
          </div>
          <div class="list-item">
            <div class="flex items-center">
              <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                <i class="fas fa-procedures text-purple-500"></i>
              </div>
              <div>
                <div class="font-medium">住院库</div>
                <div class="text-xs text-gray-500">住院区域</div>
              </div>
            </div>
            <div class="text-right">
              <div class="font-medium" id="location-inpatient">加载中...</div>
              <div class="text-xs text-gray-500">占比: <span id="location-inpatient-percent">加载中...</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <div class="tab-bar">
      <a href="home.html" class="tab-item">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item active">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </div>

  <script>
    // 模拟物资数据
    const inventoryData = [
      { id: 1, name: '一次性医用口罩', spec: '50只/盒', stock: 12500, unit: '盒', category: '医疗耗材', status: '库存充足', safeStock: 5000, lastIn: '2024-03-15', lastOut: '2024-03-20' },
      { id: 2, name: '医用手套', spec: '100只/盒', stock: 9800, unit: '盒', category: '医疗耗材', status: '库存充足', safeStock: 3000, lastIn: '2024-03-10', lastOut: '2024-03-18' },
      { id: 3, name: '一次性注射器', spec: '5ml', stock: 15600, unit: '支', category: '医疗耗材', status: '库存充足', safeStock: 8000, lastIn: '2024-03-12', lastOut: '2024-03-19' },
      { id: 4, name: '医用酒精', spec: '500ml/瓶', stock: 1290, unit: '瓶', category: '医疗耗材', status: '库存充足', safeStock: 500, lastIn: '2024-03-05', lastOut: '2024-03-15' },
      { id: 5, name: '输液器', spec: '一次性', stock: 8640, unit: '套', category: '医疗耗材', status: '库存充足', safeStock: 3000, lastIn: '2024-03-08', lastOut: '2024-03-17' },
      { id: 6, name: '医用纱布', spec: '7.5cm×7.5cm', stock: 5200, unit: '包', category: '医疗耗材', status: '库存充足', safeStock: 2000, lastIn: '2024-03-07', lastOut: '2024-03-16' },
      { id: 7, name: '医用棉签', spec: '100支/盒', stock: 3450, unit: '盒', category: '医疗耗材', status: '库存偏低', safeStock: 3000, lastIn: '2024-02-28', lastOut: '2024-03-14' },
      { id: 8, name: '一次性防护服', spec: 'XL', stock: 850, unit: '套', category: '防护用品', status: '库存预警', safeStock: 1000, lastIn: '2024-02-20', lastOut: '2024-03-10' },
      { id: 9, name: 'N95口罩', spec: '10只/盒', stock: 320, unit: '盒', category: '防护用品', status: '库存预警', safeStock: 500, lastIn: '2024-02-15', lastOut: '2024-03-05' },
      { id: 10, name: 'A4打印纸', spec: '500张/包', stock: 230, unit: '包', category: '办公用品', status: '库存充足', safeStock: 100, lastIn: '2024-03-01', lastOut: '2024-03-12' },
      { id: 11, name: '圆珠笔', spec: '0.5mm', stock: 560, unit: '支', category: '办公用品', status: '库存充足', safeStock: 200, lastIn: '2024-02-25', lastOut: '2024-03-08' },
      { id: 12, name: '消毒液', spec: '1L/瓶', stock: 420, unit: '瓶', category: '清洁用品', status: '库存充足', safeStock: 150, lastIn: '2024-02-28', lastOut: '2024-03-10' },
      { id: 13, name: '洗手液', spec: '500ml/瓶', stock: 380, unit: '瓶', category: '清洁用品', status: '库存充足', safeStock: 120, lastIn: '2024-03-02', lastOut: '2024-03-15' },
      { id: 14, name: '医疗废物袋', spec: '大号', stock: 1200, unit: '个', category: '其他物资', status: '库存充足', safeStock: 500, lastIn: '2024-03-05', lastOut: '2024-03-18' }
    ];

    // 获取URL参数中的物资ID
    function getUrlParam(name) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(name);
    }

    // 初始化页面
    function initPage() {
      const materialId = parseInt(getUrlParam('id'));
      
      // 查找对应ID的物资
      const material = inventoryData.find(item => item.id === materialId);
      
      if (!material) {
        alert('未找到该物资信息');
        return;
      }
      
      // 更新页面标题和头部信息
      document.title = `H+移动工作平台 - ${material.name}详情`;
      document.getElementById('material-name').textContent = material.name;
      document.getElementById('material-code').textContent = `编号：MS-${String(material.id).padStart(3, '0')}`;
      
      // 设置状态标签样式
      const statusElement = document.getElementById('material-status');
      statusElement.textContent = material.status;
      if (material.status === '库存充足') {
        statusElement.className = 'tag tag-green';
      } else if (material.status === '库存偏低') {
        statusElement.className = 'tag tag-orange';
      } else {
        statusElement.className = 'tag tag-red';
      }
      
      // 更新基本信息
      document.getElementById('info-name').textContent = material.name;
      document.getElementById('info-code').textContent = `MS-${String(material.id).padStart(3, '0')}`;
      document.getElementById('info-spec').textContent = material.spec;
      document.getElementById('info-category').textContent = material.category;
      document.getElementById('info-unit').textContent = material.unit;
      
      // 更新库存信息
      document.getElementById('stock-current').textContent = `${material.stock}${material.unit}`;
      document.getElementById('stock-safe').textContent = `${material.safeStock}${material.unit}`;
      document.getElementById('stock-status').textContent = material.status;
      document.getElementById('stock-last-in').textContent = material.lastIn;
      document.getElementById('stock-last-out').textContent = material.lastOut;
      
      // 模拟库存分布数据
      const totalStock = material.stock;
      const mainStock = Math.round(totalStock * 0.7); // 总库占70%
      const clinicStock = Math.round(totalStock * 0.2); // 门诊库占20%
      const inpatientStock = totalStock - mainStock - clinicStock; // 住院库占剩余10%
      
      // 更新库存分布
      document.getElementById('location-main').textContent = `${mainStock}${material.unit}`;
      document.getElementById('location-main-percent').textContent = '70%';
      document.getElementById('location-clinic').textContent = `${clinicStock}${material.unit}`;
      document.getElementById('location-clinic-percent').textContent = '20%';
      document.getElementById('location-inpatient').textContent = `${inpatientStock}${material.unit}`;
      document.getElementById('location-inpatient-percent').textContent = '10%';
    }
    
    // 页面加载完成后初始化
    window.addEventListener('DOMContentLoaded', initPage);
  </script>